<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="element/index.css" rel="stylesheet" />
		<script src="js/vue.js"></script>
		<script src="element/index.js"></script>
		<script src="js/axios.js"></script>
		<style>
			*{margin: 0;padding: 0;}
	
			html,
			body,
			#app,
			.el-container,
			.el-main {
				height: 100%;
				padding: 0;
				/* background-color: oldlace; */
			}
			
			
			.el-header{
				height: 70px !important;
				/* border: 1px solid #0000FF; */
				background-color: #FFFFFF;
				border-bottom:1px solid gainsboro;
			}
			.el-header .el-row{
				line-height: 70px;
			}
			.el-header img{
				width: 60px;
				height: 60px;
				vertical-align: middle;
			}
			.el-header h3{
				display: inline-block;
				font-size: 18px;
			}
			.el-menu-item{
				border-bottom: 1px solid gainsboro;
				background-color: #FFFFFF;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<el-row>
						<el-col :span=12>
							<img src="img/logo.jpeg" >
							<h3>甘肃农业大学信息科学技术学院教务系统</h3>
						</el-col>
						<el-col :span=12>
							<el-row type="flex" justify="end">
								<el-col :span=4 style="text-align: center;">你好！{{userName}}</el-col>
								<el-col :span=4 style="text-align: center;">
									<el-button round @click="toSelf">个人中心</el-button>
								</el-col>
								<el-col :span=4 style="text-align: center;">
									<el-button round @click="toModifyPass">修改密码</el-button>
								</el-col>
								<el-col :span=3 style="text-align: center;">
									<el-button round @click="toLogin"><el-link style="width: 100%;" href="login.html" target="_self" :underline="false">退出</el-link></el-button>
								</el-col>
								<el-col :span=3 style="text-align: center;">
									<el-button round @click="toModifyPass"><el-link style="width: 100%;"  href="list.html" target="_self" :underline="false">帮助</el-link></el-button>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-header>
				<el-container>
					<!-- 左侧导航 -->
					<el-aside width="260px" style="background-color: #eef1f6">
						<el-menu id="navMenu" :default-openeds="['1']" :router="true" unique-opened>
							<el-menu-item  @click="navToUser"><i class="el-icon-menu" ></i>用户管理</el-menu-item>
							<el-menu-item  @click="navToCheck"><i class="el-icon-menu"></i>审核</el-menu-item>
							<el-menu-item  @click="navToThesis"><i class="el-icon-menu"></i>论文发表</el-menu-item>
							<el-menu-item  @click="navToPrize"><i class="el-icon-menu"></i>获奖情况</el-menu-item>
							<el-menu-item  @click="navToManavToPrizeterialAndMonograph"><i class="el-icon-menu"></i>教材与专著</el-menu-item>
							<el-menu-item  @click="navToJiaoGai"><i class="el-icon-menu"></i>教改项目</el-menu-item>
							<el-menu-item  @click="navToKeYan"><i class="el-icon-menu"></i>科研项目</el-menu-item>
							<el-menu-item  @click="navToRongYu"><i class="el-icon-menu"></i>荣誉称号</el-menu-item>
							<el-menu-item  @click="navToJingSai"><i class="el-icon-menu"></i>指导竞赛</el-menu-item>
							<el-menu-item  @click="navTouanZhu"><i class="el-icon-menu"></i>专利及软著</el-menu-item>
							<el-menu-item  @click="navToBaoBiao"><i class="el-icon-menu"></i>报表统计</el-menu-item>
							<el-menu-item  @click="navToDaoChu"><i class="el-icon-menu"></i>导出</el-menu-item>
						</el-menu>
					</el-aside>
					<!-- 主区域 -->
					<el-main>
						<iframe :src="iframeSrc" frameborder="0" marginheight="8" marginwidth="8"
							style="display: block;width: 100%;height: 100%;"></iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
</html>
<script>
	new Vue({
		el:"#app",
		data:{
			iframeSrc: "list.html",
			userName:"刘天林"
		},
		methods:{
			navToUser:function(){
				this.iframeSrc="user.html"
			},
			navToThesis:function(){
				this.iframeSrc="list.html"
			},
			navToPrize:function(){
				
			},
			toLogin:function(){
				window.alert("删除token去登录页面")
			},
			navToJiaoGai:function(){
				
			},
			toModifyPass:function(){
				this.iframeSrc="fixpass.html"
			},
			toSelf(){
				this.iframeSrc="个人中心.html"
			},
			navToBaoBiao:function(){
				this.iframeSrc="报表.html"
			},
			navToDaoChu:function(){
				this.iframeSrc="报表.html"
			}
		}
	})
</script>
